<template>
  <div>
    <el-dialog title="添加语文作文" :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" size="mini">
        <el-form-item label="格数" :label-width="formLabelWidth">
          <el-input-number :min="1" :max="2000" v-model="form.cellCount" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uuid as createUUID, createHtmlSpace } from '@/assets/js/utils';
import { QUESTION_GROUP_TYPE_MAP, QUESTION_SIZE_MAP } from '@/assets/js/constant';
import CommonMixin from './common-mixin';

export default {
  mixins: [CommonMixin],
  computed: {
    submitData() {
      const uuid = createUUID();
      const groupType = QUESTION_GROUP_TYPE_MAP.CN_ARTICLE;
      const { title, idRange, cellCount } = this.form;
      const [startId, endId] = idRange;
      const { titleHeight } = QUESTION_SIZE_MAP;
      const { itemHeight, splitHeight } = QUESTION_SIZE_MAP.cn_article;
      const rowSize = 25;
      const rowCount = Math.ceil(cellCount / rowSize);
      const articleTitleHeight = 20;
      const height = titleHeight + articleTitleHeight
       + rowCount * itemHeight + (rowCount - 1) * splitHeight;
      const totalHeight = height;
      const noSplitHeight = itemHeight + splitHeight;
      const contents = `<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>题目：<u>${createHtmlSpace(50)}</u>`;

      return {
        title,
        uuid,
        groupType,
        startId,
        endId,
        titleHeight,
        partIndex: 0,
        articleTitleHeight,
        height,
        totalHeight,
        noSplitHeight,
        contents,

        rowSize,
        rowCount,
      };
    },
  },
  methods: {
    resetFormData() {
      const beginId = this.getBeginId();
      return {
        title: '语文作文题',
        idRange: [beginId, beginId],
        cellCount: 900,
      };
    },
  },
};
</script>
